// 导入 useState 基础Hook
import { useEffect, useState } from 'react';
// 导入 bootstrap 组件
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
// 导入素材 图标
import logo from '../assets/img/logo.svg';
// import navIcon1 from '../assets/img/nav-icon1.svg';
// import navIcon2 from '../assets/img/nav-icon2.svg';
// import navIcon3 from '../assets/img/nav-icon3.svg';
import navIcon1 from '../assets/img/github-icon.svg';
import navIcon3 from '../assets/img/csdn-icon.svg';
import navIcon2 from '../assets/img/gitee-icon.svg';
import navIcon4 from '../assets/img/xitu-icon.svg';


export const NavBar =() => {
  // 声明一个新的叫做 “前者” 的 state 变量， “后者”是操作“前者”的行为
  const [activeLink, setActiveLink] = useState('home');
  const [scrolled, setScrolled] = useState(false);

  // Effect Hook 可以让你在函数组件中执行副作用操作
useEffect(() => {
  const onScroll = () => {
    // 用户向后滚动50px 的设置
    if(window.scrollY > 50) {
      setScrolled(true)
    } else {
      setScrolled(false)
    }
  }
  // 监听滚动时 触发
  window.addEventListener("scroll",onScroll)

  // 当组件移除后 窗口删除
  return () => window.removeEventListener("scroll", onScroll)
},[])

// 声明导航栏的点击事件
const onUpdateActiveLink = (value) => {
  // 点击某一个导航，传参进来，让hook里的setActiveLink改变实参 =》 改变activelink的状态
  setActiveLink(value);
  console.log(value);
}

  return (
    // 利用三元表达式 ，去和hook里设定的 scrolled 去辨别
    <Navbar  expand="lg" className={scrolled ? "scrolled" : ""}>
      <Container>
        <Navbar.Brand href="#home">
          {/* LOGO 位置 */}
          {/* <img src= {logo} alt="logo" /> */}
          <h1>TIZI</h1>

        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" >
          <span className='navbar-toggle-icon'></span>
        </Navbar.Toggle>
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            {/* 导航栏的选项 */}
            {/* 判断 导航处于活动状态 还是 普通状态 */}
            <Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('home')}>首页</Nav.Link>
            <Nav.Link href="#skills" className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('skills')}>技术</Nav.Link>
            <Nav.Link href="#projects" className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('projects')}>方案</Nav.Link>
          </Nav>
          {/* 三方链接 */}
          <span className='navbar-text'>
            <div className='social-icon'>
              <a href='https://gitee.com/danzelt' target="blank"><img src={navIcon1} alt="" /></a>
              <a href='https://gitee.com/dong1dong123' target="blank"><img src={navIcon2} alt="" /></a>
              <a href='https://blog.csdn.net/weixin_59201679?type=blog' target="blank"><img src={navIcon3} alt="" /></a>
              <a href='https://juejin.cn/user/3875156267382040' target="blank"><img src={navIcon4} alt="" /></a>
              
            </div>
            <button className='vvd' onClick={() => console.log('与之连接')}><span>Let's Connect</span></button>
          </span>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

